<template>
	<div class="title" v-if="title !== ''">
		<p>
			{{title}}
			<span class="block block-top-left"></span>
			<span class="block block-top-right"></span>
			<span class="block block-bottom-left"></span>
			<span class="block block-bottom-right"></span>
		</p>
		<span class="triangle"></span>
		<span class="block block-bottom-left"></span>
		<span class="block block-bottom-right"></span>
		<span class="yellow-block block-bottom-right"></span>
		<span class="line"></span>
	</div>
</template>
<script>
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			to: {
				type: String
			}
		},
		computed: {
			titleWidth: function() {
				let width = 0
				switch (this.title.length) {
					case 5:
						width = 24
						break;
					case 6:
						width = 27
						break;
					case 8:
						width = 35
						break;
					case 9:
						width = 38
						break;
					case 10:
						width = 43
						break;
					case 12:
						width = 45
						break;
					case 13:
						width = 48
						break;
					default:
						width = 50
						break;
				}
				if(this.title.indexOf('TOP10') != -1) {
					width = 38
				}
				return width + '%'
			}
		}
	}
</script>
<style lang="less" scoped>
	.title {
		height: 4.166vh;
		min-height: 38px;
		position: relative;
		// display: flex;
		// align-items: center;
		// background-image: url(../assets/sksj/components/title-bg6.png);
		// -webkit-background-size: ;
		background-size: 100% 100%;
		display: flex;
		align-items: flex-start;

		p {
			background-color: #F4CD28;
			height: 75%;
			color: #000;
			font-size: 1.666vh;
			// width: 27%;
			font-weight: 700;
			margin-bottom: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 1px solid #fff;
			padding: 0 1.11vh;
			position: relative;
			font-family: "microsoft yahei";
		}
		.triangle{
			position: absolute;
			top: 0;
			right: 0;
			display: inline-block;
			width: 10px;
			height: 10px;
			border-right: 1px solid #fff;
			border-top: 1px solid #fff;
		}
		.block{
			background-color: #fff;
			display: inline-block;
			width: 4px;
			height: 4px;
			position: absolute;
		}
		.block-top-left{
			left: -2px;
			top: -2px;
		}
		.block-top-right{
			top: -2px;
			right: -2px;
		}
		.block-bottom-left{
			left: -2px;
			bottom: -2px;
		}
		.block-bottom-right{
			right: -2px;
			bottom: -2px;
		}
		.yellow-block{
			width: 8px;
			height: 4px;
			display: inline-block;
			position: absolute;
			background-color: #F4CD28;
			right: 10px;
		}
		.line{
			width: 91%;
			height: 1px;
			background-color: #fff;
			position: absolute;
			bottom: -1px;
			left: 14px;
		}

		.router {
			width: 9px;
			height: 14px;
			margin-left: 20px;
		}

		.triangle {
			position: absolute;
			right: 0;
			top: 0;
		}
	}
</style>
